<template>
  <el-form
      :size="props.size"
      :label-width="props.labelWidth"
      :label-position="props.labelPosition"
      v-bind="$attrs"
      :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch"
  >
    <template v-if="cMode === 'design'">
    <!-- 若(nested-drag-item).height + padding*2 > designerContainerHeight 则会出现滚动条  -->
    <nested-drag-item
        :style="[
            'margin-bottom: ' + props.lineSpacing + 'px',
            'width: 100%;height: 100%;min-height: 30px;background-color: #fff; '
        ]"
        :children="children"
        group="component"
    >
    </nested-drag-item>
    </template>

    <template v-else-if="cMode === 'edit'">
      <v-form-render  :style="[
            'margin-bottom: ' + props.lineSpacing + 'px',
            'width: 100%; height: 100%;min-height: 30px; background-color: #fff; ']"
                      :scheme="scheme"
                      :form-data="formData"></v-form-render>
    </template>
    <template v-else-if="cMode === 'read'">
      <v-form-render  :style="[
                      'margin-bottom: ' + props.lineSpacing + 'px',
                      'width: 100%; height: 100%;min-height: 30px; background-color: #fff; '
                      ]"
                      :scheme="scheme"
                      :form-data="formData"></v-form-render>
    </template>
    <template v-else-if="cMode === 'hidden' ">
      <v-form-render  :style="[
                      'margin-bottom: ' + props.lineSpacing + 'px',
                      'width: 100%; height: 100%;min-height: 30px; background-color: #fff; '
                      ]"
                      :scheme="scheme"
                      :form-data="formData"></v-form-render>
    </template>
  </el-form>
</template>

<script lang="ts" setup>
console.log('enter searchForm')
import {
  queryParamKey,resetQueryFormKey,showSearchKey
} from "@/config/app.keys";
import eventBus from '@/event/eventBus';
import {onMounted, ref, watch, onUnmounted, computed, getCurrentInstance, inject} from "vue";
import NestedDragItem from "@/components/form/designer/NestedDragItem.vue"
import VFormRender  from "@/components/form/designer/VFormRender.vue"
import { formModeKey } from "@/components/form/state.key";
const { proxy } = getCurrentInstance();
const queryParams = ref({
      pageNum: 1,
      pageSize: 10
})

watch(() => queryParams, () => {
  console.log('eventBus.$emit：'+JSON.stringify(queryParams))
  eventBus.$emit(queryParamKey, queryParams)
},{immediate: true,deep: true})



interface Props {
  //modelValue:object,
  mode?: FormFieldMode,
  id?:string,
  labelWidth?:string,
  labelPosition:string,
  lineSpacing:string,
  size:string,
  children:any[],
  formData?:object
}
const showSearch = ref(true)
const props = defineProps<Props>()
const formData =ref({})

const emit = defineEmits(['update:children'])

const children = ref([])
const scheme = ref({})

const formMode = inject(formModeKey)
const cMode = computed<FormFieldMode>(() => {
  if (props.mode) {
    return props.mode
  }
  if (formMode?.value) {
    return formMode.value
  }
  return "edit"
})
watch(() => props, (newVal) =>{
   //debugger;
  // console.log('props:'+JSON.stringify(props))
    if(JSON.stringify(props.children)!=JSON.stringify(children.value)) {
      children.value = props.children;
    }
    if(JSON.stringify(props.children)!=JSON.stringify(scheme.value.children)) {
      scheme.value.children = props.children;
    }
    formData.value = props.formData;
},{immediate: true,deep: true})

watch(()=> children,(newVal)=>{

  let tempJson = {children:JSON.stringify(children.value)}
  console.log('emit change children:'+JSON.stringify(tempJson))
  if(JSON.stringify(props.children)!=JSON.stringify(children.value)) {
    emit('update:children', children.value)
  }
},{immediate: true,deep: true})

onMounted(() => {
  //debugger;
  console.log('props:'+JSON.stringify(props))
  eventBus.$on(resetQueryFormKey,() => {
    proxy.resetForm("queryRef");
  })
  eventBus.$on(showSearchKey,(data: boolean) => {
    showSearch.value = data
  })
  children.value = props.children;
  scheme.value.children = props.children;
  formData.value = props.formData;
})
onUnmounted(() =>{
  eventBus.$off(resetQueryFormKey)
  eventBus.$off(showSearchKey)
})

</script>

<style scoped>

</style>
